<template>
    <div>
        <div class="header-info">
            <p>用户管理</p>
        </div>
        <div class="query">

            <kv label="登录名">
                <el-input v-model="query.loginName"></el-input>
            </kv>
            <kv label="手机">
                <el-input v-model="query.mobile"></el-input>
            </kv>
            <div>
                <el-button @click="query_click()">查询</el-button>
            </div>
        </div>

        <my-list ref="list" url="/user/list" :query="query" :page-size="20" @loaded="dataLoaded">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column label="登录名">
                <template slot-scope="scope">
                    {{scope.row.loginName}}
                </template>
            </el-table-column>

            <el-table-column label="手机号">
                <template slot-scope="scope">
                    {{scope.row.mobile}}
                </template>
            </el-table-column>
            <el-table-column label="电子邮箱">
                <template slot-scope="scope">
                    {{scope.row.email}}
                </template>
            </el-table-column>
            <el-table-column label="用户类型">
                <template slot-scope="scope">
                    <el-button  size="small" v-if="scope.row.userType" @click="info=scope.row; info.userType == 'User' ? userVisible=true : corpVisible=true ">
                        {{scope.row.userType_res}}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="收货地址">
                <template slot-scope="scope">
                    {{scope.row.recvAddress}}
                </template>
            </el-table-column>
            <el-table-column label="注册时间">
                <template slot-scope="scope">
                    {{scope.row.createAt_res}}
                </template>
            </el-table-column>


            <el-table-column label="最后更新时间">
                <template slot-scope="scope">
                    {{scope.row.updateAt_res}}
                </template>
            </el-table-column>

            <el-table-column label="重置密码">
                <template slot-scope="scope">
                    <el-button size="small" @click="reset_click(scope.row);">重置密码</el-button>
                </template>
            </el-table-column>

            <el-table-column label="删除">
                <template slot-scope="scope">
                    <el-button size="small" @click="delete_click(scope.row);">删除</el-button>
                </template>
            </el-table-column>
        </my-list>

        <el-dialog v-if="userVisible" title="查看绑定信息--个人类型" class="centerDialog"
                   :visible.sync="userVisible" :close-on-click-modal="true"
                   :showClose="true" :append-to-body="true">
            <div class="card">
                <kv label="姓名">
                    {{info.userInfo.userName}}
                </kv>
                <kv label="身份证">
                    {{info.userInfo.idCardNumber}}
                </kv>
                <kv label="正面照片">
                    <img class="logo" :src="info.userInfo.idCardImageZheng.fullUrl"/>
                </kv>
                <kv label="正面照片">
                    <img class="logo" :src="info.userInfo.idCardImageFan.fullUrl"/>
                </kv>
                <kv label="用户照片">
                    <img class="logo" :src="info.userInfo.idCardImageUser.fullUrl"/>
                </kv>
            </div>
        </el-dialog>
        <el-dialog  v-if="corpVisible" title="查看绑定信息--企业类型" class="centerDialog"
                   :visible.sync="corpVisible" :close-on-click-modal="true"
                   :showClose="true" :append-to-body="true">
            <div class="card">
                <kv label="企业名称">
                   {{info.corpInfo.corpName}}
                </kv>
                <kv label="企业信用识别代码">
                    {{info.corpInfo.corpCreditCode}}
                </kv>
                <kv label="代办人姓名">
                    {{info.corpInfo.proxyUserName}}
                </kv>
                <kv label="代办人身份证">
                    {{info.corpInfo.idCardNumber}}
                </kv>
                <kv label="正面照片">
                    <img class="logo" :src="info.corpInfo.idCardImageZheng.fullUrl"/>
                </kv>
                <kv label="正面照片">
                    <img class="logo" :src="info.corpInfo.idCardImageFan.fullUrl"/>
                </kv>
                <kv label="用户照片">
                    <img class="logo" :src="info.corpInfo.idCardImageUser.fullUrl"/>
                </kv>
            </div>
        </el-dialog>
    </div>
</template>
<style>
    .logo {
        width: 150px;
    }
</style>
<script>
    export default {
        name: 'user',
        components: {},
        data() {
            return {
                userVisible: false,
                corpVisible: false,
                query: {name: "", mobile: "", loginName: ""},
                uploadUser: {id: 0, name: ""},
                info:{userInfo:{},corpInfo:{}},
            }
        },
        mounted() {
            this.query_click();
        },
        methods: {
            query_click() {
                this.$refs['list'].doQuery()
            },
            dataLoaded(res, skip) {
                var json = res.data.data;
                json.forEach(it => {
                    jv.UserTypeEnum.fillRes(it, "userType");
                    jv.fillRes(it);
                })
            },
            reset_click(row) {
                jv.confirm("确认要重置密码吗？").then(it => {
                    this.$http.post("/user/resetPassword", {userId:row.id}).then(res => {
                        jv.info("重置密码成功:" + res.data.data);
                    });
                });
            },
            delete_click(row) {
                jv.confirm("确实要删除 " + row.name + " 的用户信息吗?").then(res => {
                    this.$http.post("/user/delete", {userId: row.id}).then(res => {
                        jv.info("删除成功");
                        this.$refs['list'].loadData()
                    })
                })
            }
        }
    }
</script>
